<template>
  <container title="应用模板">
    <div class="main-card" v-loading="loading">
      <tbc-pagination :total="total" simple :config="{page, size}" @change="loadDataList">
        <template v-slot:left>
          <el-input placeholder="关键字" class="short" v-model="keyword" clearable size="small"
                    style="margin-right:10px;width:200px;">
            <template #prefix>
              <i class="el-input__icon el-icon-search"></i>
            </template>
          </el-input>
          <el-button
              icon="el-icon-search" type="primary" size="small"
              @click="loadDataList(1)">查询
          </el-button>
        </template>
        <template v-slot:right>
          <el-button size="small" icon="el-icon-plus" circle @click="$refs.form.show()"></el-button>
          <el-button size="small" icon="el-icon-refresh" circle @click="loadDataList(page)"></el-button>
        </template>
      </tbc-pagination>
      <div class="data-container">
        <tbc-dynamic-table
            v-loading="loading"
            :data="dataList"
            :cols="[
            {type: 'selection', width: 60},
            {label: '模板设计图', prop: 'sketch', type: 'image',width: 220},
            {label: '模板名称', prop: 'template_name', width: 220},
            {label: '模板匹配路径', prop: 'page'},
            {label: '状态/时间', prop: 'status', width: 180},
            {label: '操作', width: 160, type: 'action', fixed: 'right', click: onButtonClick,
              button: [
                {label: '编辑', type: 'text', code: 'edit'},
                {label: '设计', type: 'text', code: 'design'},
                {label: '复制', type: 'text', code: 'copy'},
                {label: '删除', type: 'text', code: 'delete'},
              ]}]">
          <template #template_name="scope">
            <p>{{ scope.row.template_id }}</p>
            <p>{{ scope.row.template_name }}</p>
          </template>
          <template #status="scope">
            <p>
              <el-tag
                  effect="dark"
                  size="mini"
                  v-if="scope.row.status === 1"
                  type="success"
              >正常
              </el-tag
              >
              <el-tag
                  effect="dark"
                  size="mini"
                  v-if="scope.row.status === 2"
                  type="danger"
              >已禁用
              </el-tag
              >
            </p>
            <p>{{ scope.row.create_time }}</p>
          </template>
        </tbc-dynamic-table>
      </div>
      <tbc-pagination :total="total" :config="{page, size}" @change="loadDataList"/>
    </div>
  </container>
  <template-form ref="form" @success="loadDataList"/>
</template>

<script lang="ts">
import {defineAsyncComponent, defineComponent, onMounted, ref, Ref} from 'vue'
import useVersion from './api/version'
import {useRouter} from "vue-router";

export default defineComponent({

  name: 'app-template-list',

  components: {
    TemplateForm: defineAsyncComponent(() =>
        import('./TemplateForm.vue')),
  },

  setup() {
    const warehouse = useVersion()
    const form: Ref = ref(null)
    const distribute: Ref = ref(null)
    const router = useRouter()

    // 点击按钮
    const onButtonClick = (data: { template_id: string }, action: string) => {
      if (action === 'edit') return form.value.show(data)
      if (action === 'design') return router.push({name: 'app-template-design', query: {id: data.template_id}})
      // if (action === 'delete') return warehouse.deleteDataItem(data)
      // if (action === 'distribute') return distribute.value.show(data)
    }

    onMounted(() => {
      warehouse.loadDataList(1)
    })

    return {
      ...warehouse,
      form,
      distribute,
      onButtonClick
    }
  }
})
</script>
